<!--
* @author wn
* @date 2022/04/26 15:05:38
* @description: 骨架屏组件  使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下
!-->
<template>
	<!-- 1 盒子-->
	<div
		class="xtx-skeleton"
		:style="{ width, height }"
		:class="{ shan: animated }"
	>
		<!-- 2 闪效果 xtx-skeleton 伪元素 --->
		<div class="block" :style="{ backgroundColor: bg }"></div>
	</div>
</template>
<script>
export default {
	name: 'XtxSkeleton',
	// 使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下
	props: {
		bg: {
			type: String,
			default: '#efefef',
		},
		width: {
			type: String,
			default: '100px',
		},
		height: {
			type: String,
			default: '100px',
		},
		animated: {
			type: Boolean,
			default: false,
		},
	},
}
</script>
<style scoped lang="less">
.xtx-skeleton {
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
	.block {
		width: 100%;
		height: 100%;
		border-radius: 2px;
	}
}
// 默认 一闪一闪的效果
.shan {
	&::after {
		content: '';
		position: absolute;
		animation: shan 1.5s ease 0s infinite;
		top: 0;
		width: 50%;
		height: 100%;
		background: linear-gradient(
			to left,
			rgba(255, 255, 255, 0) 0,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0) 100%
		);
		transform: skewX(-45deg);
	}
}
@keyframes shan {
	0% {
		left: -100%;
	}
	100% {
		left: 120%;
	}
}
// 骨架动画   透明度的渐变  xtx-skeleton
.className {
	animation: fade 1s linear infinite alternate;
}
@keyframes fade {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 1;
	}
}
</style>
